import type { FC, ReactNode } from 'react';
import { memo, useEffect } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import {
  Button,
  Checkbox,
  Form,
  Input,
  Space,
  Typography,
  message,
} from 'antd';
import { UserOutlined } from '@ant-design/icons';
import styles from './Login.module.scss';
import { REGISTER_PATH, MANAGE_LIST_PATH } from '@/router';
import { login } from '@/services/user';
import { useRequest } from 'ahooks';
import { setToken } from '@/utils/userToken';

interface IProps {
  children?: ReactNode;
}
const { Title } = Typography;
const USERNAME_KEY = 'USERNAME';
const PASSWORD_KEY = 'PASSWORD';

const setUser = (username: string, password: string) => {
  localStorage.setItem(USERNAME_KEY, username);
  localStorage.setItem(PASSWORD_KEY, password);
};
const getUser = () => {
  const username = localStorage.getItem(USERNAME_KEY);
  const password = localStorage.getItem(PASSWORD_KEY);
  return { username, password };
};
const removeUser = () => {
  localStorage.removeItem(USERNAME_KEY);
  localStorage.removeItem(PASSWORD_KEY);
};
const Login: FC<IProps> = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();

  useEffect(() => {
    const { username, password } = getUser();
    if (username && password) {
      form.setFieldsValue({ username, password });
    }
  }, [form]);

  const { run } = useRequest(
    async (values: any) => {
      const { username, password } = values;
      const res = await login(username, password);
      return res;
    },
    {
      manual: true,
      onSuccess: (res) => {
        const { token = '' } = res;
        setToken(token);
        message.success('登录成功');
        navigate(MANAGE_LIST_PATH);
      },
    }
  );

  const onFinish = (values: any) => {
    const { username, password, remember } = values;
    run(values);
    if (remember) {
      setUser(username, password);
    } else {
      removeUser();
    }
  };
  return (
    <>
      <div className={styles.container}>
        <div>
          <Space>
            <Title level={2}>
              <UserOutlined />
            </Title>
            <Title level={2}>登录</Title>
          </Space>
        </div>
        <Form
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          form={form}
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            dependencies={['password']}
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            name={'remember'}
            valuePropName="checked"
            wrapperCol={{ offset: 6, span: 16 }}
          >
            <Checkbox>记住我</Checkbox>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
            <Space>
              <Link to={REGISTER_PATH}>注册</Link>
              <Button type="primary" htmlType="submit">
                登录
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </div>
    </>
  );
};

export default memo(Login);
